<template>
  <div>
    <el-dialog :title="addedService.label" :visible.sync="visible" width="width:1000px" append-to-body @close="onClose">

      <XmTable :config="tableConfig" :noWatchParams="{
        addedService: addedService.code
      }" class="table" ref="table">
        <div slot="filter" class="mb-10 fr">
          <el-button type="primary" size="small" plain @click="patchPending">批量处理</el-button>
          <el-button size="small" @click="search">刷 新</el-button>
        </div>
        <template slot="column-type" slot-scope="{data}">
          <span>{{ addedServicesTypeMap[data.type] }}</span>
        </template>
        <template slot="column-operate" slot-scope="{data}">
          <el-button type="text" size="mini" @click="handlePending([data])">
            已处理
          </el-button>
          <el-button type="text" size="mini" @click="showLog(data)">查看日志</el-button>
        </template>
      </XmTable>
    </el-dialog>

    <orderLogDialog ref="orderLogDialog"></orderLogDialog>
  </div>
</template>

<script>
import {
  tableConfig, // 订单日志
} from './config'
import {
  addedConfirmDispose
} from "@/api/system/addedServices";
import orderLogDialog from '@/components/dialog/orderLogDialog'
import { mapGetters } from "vuex";

export default {
  components: {
    orderLogDialog
  },
  props: {
    addedService: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      tableConfig,
      visible: false,
    };
  },
  computed: {
    ...mapGetters(['addedServicesTypeMap'])
  },
  methods: {
    show() {
      this.visible = true
      this.fetch()
    },
    hide() {
      this.visible = false
    },
    fetch() {
      this.$refs.table && this.$refs.table.fetch()
    },
    search() {
      this.fetch()
    },
    onClose() {
      this.$emit('close')
    },
    handlePending(datas) {
      const params = datas.map(item => {
        return {
          id: item.extId,
          orderId: item.orderId,
          type: item.type
        }
      })
      addedConfirmDispose(params).then(res => {
        if (res.data && res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '处理成功！'
          })
          this.fetch()
        }
      })
    },
    patchPending() {
      const checkeds = this.getSelection()
      if (checkeds && checkeds.length) {
        this.$confirm('请确认所选订单是否已经处理完成！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.handlePending(checkeds)
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请先勾选记录！'
        })
      }
    },
    getSelection() {
      const tables = this.$refs.table && this.$refs.table.getSelection()
      return tables || []
    },
    showLog(data) {
      this.$refs.orderLogDialog.show({ orderId: data.orderId })
    }
  },
};
</script>
<style lang="scss" scoped>
</style>